<!DOCTYPE html>
<html>
<head>
    <title>SMACCMPilot Motors</title>

    <!-- Bootstrap core CSS -->
    <link href="/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="/bootstrap-3.3.4-dist/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body role="document">

    <div class="container">
    <div class="row">
    <div class="col-md-3" role="main">
    <h2>Motor Outputs</h2>
    <p><button type="button" class="btn btn-sm" id="motor-sch-btn">?</button>
    </p>

    </div> <!-- end column -->
    </div> <!-- end row -->
    <div class="row">
    <div class="col-md-3" role="main">

    <p>Front Left:
      <span id="motor-frontleft-progbar-lbl">?</span> </p>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0"
           aria-valuemin="-1" aria-valuemax="1" style="width: 50%;"
           id="motor-frontleft-progbar">
      </div>
    </div>
    <p>Back Left:
      <span id="motor-backleft-progbar-lbl">?</span> </p>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0"
           aria-valuemin="-1" aria-valuemax="1" style="width: 50%;"
           id="motor-backleft-progbar">
      </div>
    </div>
    </div> <!-- end column -->
    <div class="col-md-3" role="main">
    <p>Front Right:
      <span id="motor-frontright-progbar-lbl">?</span> </p>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0"
           aria-valuemin="-1" aria-valuemax="1" style="width: 50%;"
           id="motor-frontright-progbar">
      </div>
    </div>
    <p>Back Right:
      <span id="motor-backright-progbar-lbl">?</span> </p>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0"
           aria-valuemin="-1" aria-valuemax="1" style="width: 50%;"
           id="motor-backright-progbar">
      </div>
    </div>

    </div> <!-- end col-md-6 -->
    <div class="col-md-6" role="complementary">
    </div>
    </div> <!-- end row -->
    </div> <!-- end container -->
    <script src="/underscore-1.8.3.js"></script>
    <script src="/jquery-2.1.3.js"></script>
    <script src="/backbone-1.1.2.js"></script>
    <script src="/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <script src="/scheduler.js"></script>
<script>
$(function() {

var MotorOutput = Backbone.Model.extend({
  urlRoot: '/controllable_vehicle_i/motor_output'
});

var MotorSliderView = Backbone.View.extend({
  initialize: function (options) {
    this.selector = options.selector;
    this.model.on('change', this.render, this);
    this.$progbar = $('#motor-' + this.selector + '-progbar');
    this.$label   = $('#motor-' + this.selector + '-progbar-lbl');
    this.render();
  },
  render: function () {
    var val = this.model.toJSON()[this.selector] || 0;
    this.$label.html(val.toFixed(2));
    var percent = val * 100;
    this.$progbar.css('width', percent.toString() + '%');
  }
});

var MotorsView = function (opts) {
  this.frontleft =
    new MotorSliderView({model: opts.model, selector: 'frontleft'});
  this.frontright =
    new MotorSliderView({model: opts.model, selector: 'frontright'});
  this.backleft =
    new MotorSliderView({model: opts.model, selector: 'backleft'});
  this.backright =
    new MotorSliderView({model: opts.model, selector: 'backright'});
};

window.motorOutput = new MotorOutput({});
window.motorOutputView = new MotorsView({ model: motorOutput });

window.motorOutputScheduler =
  new Scheduler({ period: false}, motorOutput);
window.motorOutputSchedulerView =
  new SchedulerButtonView({ model: motorOutputScheduler, el: '#motor-sch-btn' });

});
</script>

</body>
</html>
